<html>

<head>
    <meta charset="utf-8">
    <title>d3</title>
</head>

<body>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script>
        var width = 600;
        var height = 600;
        var dataset = [30, 10];

        var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);

        var pie = d3.layout.pie();

        var outerRadius = width / 4;
        var innerRadius = width / 4;
        var arc = d3.svg.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius);
        var text = d3.select('svg')
            .append("text")
            .text('30%')
            .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")")
        var arcs = svg.selectAll("g")
            .data(pie(dataset))
            .enter()
            .append("g")
            .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")")
            .attr("stroke", function (d, i) {
                if (i == 0) {
                    return "red";
                } else {
                    return "blue";
                }
            })
            .attr("stroke-width", "10")
        arcs.append("path")
            .attr("fill", function (d, i) {
                if (i == 0) {
                    return "white";
                } else {
                    return "blue";
                }
            })
            .attr("d", function (d) {
                return arc(d);
            })
            .attr("stroke-dasharray", function (d, i) {
                if (i == 0) {
                    return "5,5";
                } else {
                    return "0,0";
                }
            });
    </script>
</body>

</html>